<template>
	<view class="">
		<view class="box">
			<view class="flex box_head u-flex-between">
				<view class="box_head_title">
					门牌号{{big_sort}}-{{small_sort}}
				</view>
				<view class="box_head_name">
					{{familyname}}
				</view>
			</view>
			<view class="box_lists flex u-flex-between ">
				<view class="left">
					<view class="box_list" v-for="(i,v) in oneWord" :key="v" >
						<view class="b_l_name u-line-1">
							{{i.xh}}.{{i.wordHead}}
						</view>
					
					</view>
				</view>
				<view class="right">
					<view class="box_list" v-for="(i,v) in twoWord" :key="v" >
						<view class="b_l_name u-line-1">
							{{i.xh}}.{{i.wordHead}}
						</view>
						
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive,
		watch
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const resultWordListApi = inject('resultWordList')
	const getSingleWord = inject('getSingleWord')
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const oneWord = ref([])
	const twoWord = ref([])
	const familyname = ref('')
	const show = ref(false)
	const current = ref(1)
	onLoad((op) => {
		console.log(op, '接收的参数')
		page.value = op.page
		small_sort.value = op.small_sort
		big_sort.value = op.big_sort
		// resultWordListApi({
		// 	page: page.value,
		// 	small_sort: small_sort.value,
		// 	big_sort: big_sort.value
		// }).then(res => {
		// 	console.log(res, 106)
		// 	oneWord.value = res.oneWord
		// 	twoWord.value = res.twoWord
		// 	familyname.value = res.familyname
		// })

	})
	onShow((op) => {
		show.value = false
		resultWordListApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value
		}).then(res => {
			console.log(res, 106)
			oneWord.value = res.oneWord
			twoWord.value = res.twoWord
			familyname.value = res.familyname
		})

	})
	// 监听oneWord数组中每个对象的tran属性的变化
	watch(
		() => oneWord.value.map(item => item.tran),
		(newTranArray, oldTranArray) => {
			console.log("tran属性发生了变化");
			console.log("新的值：", newTranArray);
			console.log("旧的值：", oldTranArray);
			// 在这里可以添加根据新值进行页面更新的相关代码，比如重新渲染相关元素等
		}, {
			deep: true
		}
	);
	const open = (i, v) => {
		current.value = i.xh
		// console.log(current.value)
		uni.navigateTo({
			url: '/pagesA/reciteWords/editWord?id=' + i.id + '&wordId=' + i.wordId
		})
	}
	// 去编故事
	const nextClick = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/tellStory?page=' + page.value + "&small_sort=" + small_sort.value +
				'&big_sort=' + big_sort.value + '&familyname=' + familyname.value
		})
	}
</script>

<style scoped lang="scss">
	.box {
		width: 710rpx;
		height: 1040rpx;
		background: #F4FFF8;
		margin: 40rpx auto;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 12rpx solid #51D580;

		.box_head {
			padding: 30rpx 40rpx;

			.box_head_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
			}

			.box_head_name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #666666;
			}
		}

		.box_lists {
			// padding: 0 104rpx;
			margin-top: 40rpx;

			.left,
			.right {
				width: 50%;
				padding-right: 10rpx;
			}

			.left {
				margin-left: 140rpx;

			}

			.box_list {
				margin-bottom: 80rpx;
				padding: 10rpx;

				// width: 50%;
				.b_l_name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 30rpx;
					color: #333333;
				}

				.b_l_pro {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}

			.hover {
				border: 4rpx solid #51D580;
				border-radius: 30rpx;
			}
		}

	}

	.pos {
		position: fixed;
		bottom: 36rpx;
		left: 24rpx;

		.warn {
			margin-bottom: 24rpx;

			.warn_img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 4rpx;
			}

			.warn_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;

				text {
					color: #DF2828;
				}
			}

		}

		.btn {
			width: 702rpx;
			height: 104rpx;
			background: #51D580;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			line-height: 104rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	@media (max-height: 800px) {
		.box {
			height: 850rpx;

		}
	}



	.popup_bg {
		width: 574rpx;
		height: 788rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/second_backgrounp.png') no-repeat;
		background-size: 100% 100%;

		.popup_pro {
			width: 512rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin: 0 auto;
		}


		.popup_see {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-top: 80rpx;
		}

		.popup_name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			width: 512rpx;
			margin: 0 auto;
			padding-top: 36rpx;
		}

	}
</style>